// 修改 echarts 主题的颜色配置
var theme = {
    color: ['#ff9800', '#4caf50', '#2196f3', '#ff5252']  // 设置箱线图线段颜色，依次为服务质量、卫生状况、设施体验、整体评价
};
echarts.registerTheme('myTheme', theme);  // 注册新的主题


$(function () {
    echarts_13();
    echarts_14();
    echarts_15();
    echarts_16();
    echarts_17();
    echarts_18();



    function echarts_13() {
        var myChart = echarts.init(document.getElementById('echart13'));
        $.ajax({
            type: 'GET',
            url: 'dataVisualization/data/echarts_13.json',
            dataType: 'json',
            success: function (jsonData) {
              var seriesArr = [];
              jsonData.seriesData.forEach(function (series) {
                var seriesObj = {
                  name: series.name,
                  type: "line",
                  smooth: true,
                  symbol: "circle",
                  symbolSize: 5,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 2,
                    },
                  },
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "rgba(255, 102, 0, 0.9)",  // 橙色调的渐变起始色
                          },
                          {
                            offset: 0.8,
                            color: "rgba(255, 204, 0, 0.9)",  // 黄色调的渐变结束色
                          },
                        ],
                        false
                      ),
                      shadowColor: "#8CC152",
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderColor: "rgba(255, 204, 0, 1)",  // 黄色调的边框颜色
                      borderWidth: 2,
                    },
                  },
                  data: series.data,
                };
                seriesArr.push(seriesObj);
              });
        
              option = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    lineStyle: {
                      color: "#FFD700",
                    },
                  },
                },
                legend: {
                  top: "0%",
                  data: ["好评", "差评"],
                  textStyle: {
                    color: "rgba(255,255,255,.8)",
                    fontSize: 12,
                  },
                },
                grid: {
                  left: "5px",
                  top: "20px",
                  right: "5px",
                  bottom: "40px",  // 添加底部留白，以显示 x 轴刻度标签
                  containLabel: true,
                },
        
                xAxis: [
                  {
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                      textStyle: {
                        color: "#ffffff",
                        fontSize: 12,
                      },
                    },
                    axisLine: {
                      lineStyle: {
                        color: "#4A89DC",
                      },
                    },
                    data: jsonData.xAxisData,
                  },
                  {
                    axisPointer: { show: false },
                    axisLine: { show: false },
                    position: "bottom",
                    offset: 20,
                  },
                ],
        
                yAxis: [
                  {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                      lineStyle: {
                        color: "rgba(255,255,255,.1)",
                      },
                    },
                    axisLabel: {
                      textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                      },
                    },
        
                    splitLine: {
                      lineStyle: {
                        color: "rgba(255,255,255,.1)",
                      },
                    },
                  },
                ],
                series: seriesArr,
              };
        
              // 添加动画效果
              var animationDuration = 2000;  // 动画持续时间，单位ms
              var animationEasing = 'quadraticOut';  // 动画缓动效果
              option.animationDuration = animationDuration;
              option.animationEasing = animationEasing;
        
              // 添加工具箱
              option.toolbox = {
                feature: {
                  saveAsImage: { show: true, title: '保存为图片' },
                  dataView: { show: true, title: '数据视图' },
                  restore: { show: true, title: '重置' },
                  magicType: { show: true, type: ['line', 'bar'], title: { line: '切换为折线图', bar: '切换为柱状图' } },
                },
                top: '-10px',
                right: '-10px',
                iconStyle: { color: 'rgba(255,255,255,.8)' },
                emphasis: { iconStyle: { color: 'rgba(255,255,255,1)' } },
              };
        
              myChart.setOption(option);
              window.addEventListener("resize", function () {
                myChart.resize();
              });
            },
            error: function (xhr, status, error) {
              console.log('Failed to fetch external JSON data, status: ' + status + ', error: ' + error);
            }
          });
    }


    function echarts_14() {
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart14'));
    
        // 模拟的员工分布和工作任务数据
        var data = {
            "name": "酒店管理",
            "children": [
                {
                    "name": "市场部",
                    "itemStyle": {
                        "color": "#FF8C00"
                    },
                    "children": [
                        { "name": "市场经理", "value": 20, "itemStyle": { "color": "#FF1493" } },
                        { "name": "市场专员", "value": 30, "itemStyle": { "color": "#FFD700" } }
                    ]
                },
                {
                    "name": "客房部",
                    "itemStyle": {
                        "color": "#FF4500"
                    },
                    "children": [
                        { "name": "客房经理", "value": 15, "itemStyle": { "color": "#008000" } },
                        { "name": "客房服务员", "value": 25, "itemStyle": { "color": "#FF69B4" } }
                    ]
                },
                {
                    "name": "餐饮部",
                    "itemStyle": {
                        "color": "#00BFFF"
                    },
                    "children": [
                        { "name": "餐饮经理", "value": 18, "itemStyle": { "color": "#FF00FF" } },
                        { "name": "厨师", "value": 22, "itemStyle": { "color": "#1E90FF" } }
                    ]
                },
                {
                    "name": "安保部",
                    "itemStyle": {
                        "color": "#FF6347"
                    },
                    "children": [
                        { "name": "安保经理", "value": 12, "itemStyle": { "color": "#00CED1" } },
                        { "name": "保安", "value": 20, "itemStyle": { "color": "#FFDAB9" } }
                    ]
                },
                { "name": "后勤部", "value": 50, "itemStyle": { "color": "#FF0000" } },
                { "name": "财务部", "value": 3, "itemStyle": { "color": "#FFFF00" } }
            ]
        }
        // 配置矩形树图的选项
        var option = {
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            series: [
                {
                    type: 'treemap',
                    roam: false,
                    nodeClick: false,
                    data: [data],
                    breadcrumb: {
                        show: true,
                        height: 22,
                        itemStyle: {
                            color: 'picker-light-color'
                        }
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: '{b}'
                    },
                    events: {
                        click: handleClick
                    },
                    colorMappingBy: "value"
                }
            ]
        };
    
        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    
        // 在点击事件的处理函数中更新层级导航的显示
        function handleClick(params) {
            var breadcrumbData = params.name;
            // 更新层级导航的显示，例如使用 DOM 操作来更新页面上的导航元素，展示当前的层级路径
            var breadcrumbElement = document.getElementById('breadcrumb');
            if (breadcrumbElement) {
                breadcrumbElement.innerHTML = breadcrumbData;
            }
        }
    }

    function handleClick(params) {
        var breadcrumb = myChart.getModel().getOption().series[0].breadcrumb;
        var path = [];

        traverseTree(data);

        function traverseTree(node) {
            path.unshift(node.name);
            if (node.children) {
                for (var i = 0; i < node.children.length; i++) {
                    if (node.children[i].name === params.name) {
                        if (path.length > 1) {
                            breadcrumb.show = true;
                            breadcrumb.formatter = generateFormatter(path);
                        } else {
                            breadcrumb.show = false;
                        }
                        break;
                    }
                    traverseTree(node.children[i]);
                }
                path.shift();
            }
        }

        function generateFormatter(path) {
            var formatter = '';
            for (var i = 0; i < path.length - 1; i++) {
                formatter += path[i] + ' > ';
            }
            formatter += '{b}';
            return formatter;
        }

        myChart.setOption({ series: [{ breadcrumb: breadcrumb }] });
    }


    function echarts_15() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("echart15"));
        // 模拟的房价与入住率数据
        var data = generateRandomData(20);

        function generateRandomData(num) {
            var randomData = [];
            for (var i = 0; i < num; i++) {
                var price = Math.floor(Math.random() * 500) + 100; // 随机生成100-599之间的房价
                var occupancyRate = Math.floor(Math.random() * 50) + 50; // 随机生成50-99之间的入住率
                randomData.push([price, occupancyRate]);
            }
            return randomData;
        }

        // 配置散点图的选项
        var option = {
            grid: {
                left: '2%',
                top: '30px',
                right: '10%',
                bottom: '4%',
                containLabel: true
            },
            // 图例
            legend: {
                data: ['房价', '入住率'],
                textStyle: {
                    color: '#fff'
                }
            },
            // 工具箱
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            // 工具提示
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            // x轴
            xAxis: {
                type: 'value',
                name: '房价（元）',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                name: '入住率（%）',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                }
            },
            tooltip: {
                formatter: function (params) {
                    return '房价：' + params.value[0] + '元 <br/>入住率：' + params.value[1] + '%';
                }
            },
            series: [{
                symbolSize: 10,
                data: data,
                type: 'scatter',
                // 改变颜色
                itemStyle: {
                    color: function (params) {
                        if (params.value[1] > 60) {
                            return '#FF0000';
                        } else {
                            return '#fe9a03';
                        }
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: function (params) {
                        return params.value[1];
                    },
                    color: '#fff'
                }

            }]
        };

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);

        // 监听窗口大小变化，自动调整图表大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


    function echarts_16() {
        var myChart = echarts.init(document.getElementById("echart16"), 'myTheme');  // 使用新的主题
        option = {
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '4%',
                right: '4%',
                bottom: '10%',
                top: '5%'
            },
            xAxis: {
                type: 'category',
                data: ['服务质量', '卫生状况', '设施体验', '整体评价'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '评分',
                min: 0,
                max: 10,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '评分分布',
                    type: 'boxplot',
                    data: [
                        [5, 7, 8, 8, 9, 9.5],  // 服务质量评分的最小值、下四分位数、中位数、上四分位数、最大值
                        [6, 7, 7.5, 8, 9, 9.3], // 卫生状况评分的最小值、下四分位数、中位数、上四分位数、最大值
                        [7, 8, 8.5, 9, 9.5, 9.8], // 设施体验评分的最小值、下四分位数、中位数、上四分位数、最大值
                        [6, 7, 7.5, 8, 9, 9.2] // 整体评价评分的最小值、下四分位数、中位数、上四分位数、最大值
                    ],
                    itemStyle: {
                        color: '#FFDAB9' // 设置箱线图的颜色
                    },
                    tooltip: {
                        formatter: function (param) {
                            return param.name + ': <br/>最大值: ' + param.data[5] + '<br/>上四分位数: ' + param.data[4] + '<br/>中位数: '
                                + param.data[3] + '<br/>下四分位数: ' + param.data[2] + '<br/>最小值: ' + param.data[1];
                        }
                    }
                }
            ]
        };

        // 使用指定的配置项和数据显示图表
        myChart.setOption(option);

        // 监听窗口大小变化，自动调整图表大小
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


    function echarts_17() {
        var myChart = echarts.init(document.getElementById('echart17'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'
            },
            series: [{
                grid: {
                    left: '0%',
                    top: '10px',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                type: 'sunburst',
                radius: [0, '90%'], // 设置半径范围
                label: {
                    rotate: 'radial'
                },
                data: [{
                    name: '总费用',
                    value: 100,
                    itemStyle: {
                        color: '#47a7fe' // 设置总费用的颜色
                    },
                    children: [{
                        name: '房屋费用',
                        value: 40,
                        itemStyle: {
                            color: '#ffa940' // 设置房屋费用的颜色
                        },
                        children: [
                            { name: '房租', value: 20, itemStyle: { color: '#6abf67' } },
                            { name: '水电费', value: 10, itemStyle: { color: '#9b88f6' } },
                            { name: '维修费', value: 10, itemStyle: { color: '#f2637b' } }
                        ]
                    }, {
                        name: '人员费用',
                        value: 30,
                        itemStyle: {
                            color: '#ff7c78' // 设置人员费用的颜色
                        },
                        children: [
                            { name: '工资', value: 20, itemStyle: { color: '#ffb941' } },
                            { name: '社保费', value: 5, itemStyle: { color: '#4fcb74' } },
                            { name: '福利费', value: 5, itemStyle: { color: '#47a7fe' } }
                        ]
                    }, {
                        name: '采购物料费用',
                        value: 20,
                        itemStyle: {
                            color: '#7266ba' // 设置采购物料费用的颜色
                        },
                        children: [
                            { name: '食材', value: 10, itemStyle: { color: '#f26664' } },
                            { name: '用品耗材', value: 5, itemStyle: { color: '#ffa941' } },
                            { name: '设备器具', value: 5, itemStyle: { color: '#4fcb74' } }
                        ]
                    }, {
                        name: '其他费用',
                        value: 10,
                        itemStyle: {
                            color: '#6abf67' // 设置其他费用的颜色
                        },
                        children: [
                            { name: '广告宣传费', value: 5, itemStyle: { color: '#7266ba' } },
                            { name: '差旅费', value: 3, itemStyle: { color: '#9b88f6' } },
                            { name: '税金', value: 2, itemStyle: { color: '#f26664' } }
                        ]
                    }]
                }]
            }],
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 100,
                inRange: {
                    color: ['#2F93C8', '#AEC48F', '#FFDB5C', '#F98862']
                }
            },
            // 工具箱
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false }
                }
            },
        };

        myChart.setOption(option);

        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }


    function echarts_18() {
        var myChart = echarts.init(document.getElementById('echart18'));
        var categories = [
            { name: '设备' },
            { name: '房间' }
        ];

        fetch('dataVisualization/data/echarts_18.json')
            .then(response => response.json())
            .then(data => {
                var option = {
                    series: [{
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 50,
                        roam: true,
                        label: {
                            show: true,
                            formatter: '{b}',
                            fontSize: 14
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 12
                        },
                        data: data.nodes,
                        links: data.links,
                        categories: categories,
                        emphasis: {
                            lineStyle: {
                                width: 4
                            }
                        },
                        force: {
                            repulsion: 250,
                            edgeLength: [80, 200]
                        }
                    }]
                };

                myChart.setOption(option);
                myChart.on('click', function (params) {
                    var clickedNodeIndex = params.dataIndex;
                    var filteredData = {
                        nodes: [data.nodes[clickedNodeIndex]],
                        links: []
                    };
                    data.links.forEach(function (link) {
                        if (
                            link.source === clickedNodeIndex ||
                            link.target === clickedNodeIndex
                        ) {
                            filteredData.links.push(link);
                        }
                    });

                    var filteredOption = {
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            symbolSize: 50,
                            roam: true,
                            label: {
                                show: true,
                                formatter: '{b}',
                                fontSize: 14
                            },
                            edgeSymbol: ['circle', 'arrow'],
                            edgeSymbolSize: [4, 10],
                            edgeLabel: {
                                fontSize: 12
                            },
                            data: filteredData.nodes,
                            links: filteredData.links,
                            categories: categories,
                            emphasis: {
                                lineStyle: {
                                    width: 4
                                }
                            },
                            force: {
                                repulsion: 250,
                                edgeLength: [80, 200]
                            }
                        }]
                    };

                    myChart.setOption(filteredOption);
                });

                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }
});
